<template>
  <div class="envMonitoring">
    <el-row class="envMonitoring_nav">
      <el-col :span="24" class="titles">环境监测</el-col>
    </el-row>
    <el-row class="envMonitoringContent">
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{'background-color': '#F5F5F5'}"
          >
            <el-table-column prop="created_at" label="时间"></el-table-column>
            <el-table-column prop="pmt" label="PM10（μg/m³）"></el-table-column>
            <el-table-column prop="pmtpf" label="PM2.5μg/m³）"></el-table-column>
            <el-table-column prop="noice" label="噪音（dB）"></el-table-column>
            <el-table-column prop="temperature" label="温度（℃）"></el-table-column>
            <el-table-column prop="dampness" label="相对湿度（%）"></el-table-column>
            <el-table-column prop="wind_speed" label="风速"></el-table-column>
            <el-table-column prop="wind_direction" label="风向"></el-table-column>
          </el-table>
        </template>
      </el-col>
      <el-col :span="24" style="padding:40px 0;text-align: center;">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { monitorPublicApi } from "@/services/ProjectCenter";
export default {
  data() {
    return {
      tableData: [],
      page: 1,
      pageTotal: 0,
      projects: this.$route.query.projects,
      uuid: this.$route.query.uuid
    };
  },
  methods: {
    //获取表格数据
    getData() {
      monitorPublicApi
        .getEnvironmentList({
          params: {
            project_id: this.projects,
            page: this.page
          }
        })
        .then(res => {
          this.tableData = res.data.data;
          this.pageTotal = res.data.total;
        });
    },
    //分页
    handleCurrentChange(page) {
      this.page = page;
      this.getData();
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped lang="scss">
.envMonitoring_nav {
  padding: 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d9d9d9;
  height: 60px;

  .titles {
    text-align: left;
    line-height: 60px;
    font-size: 16px;
    color: #1441b3;
  }

  .backScreen {
    text-align: right;
    line-height: 60px;
  }
}

.envMonitoringContent {
  padding: 0 20px;
}
</style>